<template>
  <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref, watch, onBeforeUnmount } from 'vue'
const props = defineProps({
  xData: {
    type: Array,
    default: () => [],
  },
  sData: {
    type: Array,
    default: () => [],
  },
  data1: {
    type: Array,
    default: () => [],
  },
  data2: {
    type: Array,
    default: () => [],
  },
  data3: {
    type: Array,
    default: () => [],
  },
  bottomData: {
    type: Object,
    default: () => ({
      // zczs: [20, 20],
      // qlsyqsl: [0, 40],
      // qlddcsl: [0, 40],
    }),
  },
})
const dataStyle = {
  normal: {
    label: {
      show: false,
    },
    labelLine: {
      show: false,
    },
    shadowBlur: 0,
    shadowColor: '#203665',
  },
}

const option = ref({
  series: [
    {
      name: '自查房屋数量',
      type: 'pie',
      clockWise: false,
      radius: ['90%', '75%'], // 使用相对值
      hoverAnimation: false,
      center: ['15%', '50%'],
      label: {
        normal: {
          rich: {
            a: {
              color: '#01AAED',
              align: 'center',
              fontSize: 20,
              fontWeight: 'bold',
            },

            b: {
              color: '#fff',
              align: 'center',
              fontSize: 14,
            },
          },
          formatter: function (params) {
            return '{b|自查房屋数量}\n\n' + '{a|' + params.value + '}';
          },
          position: 'center',
          show: true,
          // textStyle: {
          //   fontSize: '18',
          //   fontWeight: 'normal',
          //   color: '#fff',
          // },
        },
      },
      itemStyle: {
        normal: {
          color: '#01AAED',
          shadowColor: '#01AAED',
          shadowBlur: 0,
        },
      },
      data: [
        {
          value: `${props.bottomData.zczs[0]}`,
        },
      ],
    },
    {
      name: '自查隐患数量',
      type: 'pie',
      clockWise: false,
      radius: ['90%', '75%'], // 使用相对值
      itemStyle: {
        normal: {
          color: '#FF5722',
          shadowColor: '#FF5722',
          shadowBlur: 0,
        },
      },
      hoverAnimation: false,
      center: ['50%', '50%'],
      label: {
        normal: {
          rich: {
            a: {
              color: '#FF5722',
              align: 'center',
              fontSize: 20,
              fontWeight: 'bold',
            },
            b: {
              color: '#fff',
              align: 'center',
              fontSize: 14,
            },
          },
          formatter: function (params) {
            return '{b|自查隐患数量}\n\n' + '{a|' + params.value + '}';
          },
          position: 'center',
          show: true,
          // textStyle: {
          //   fontSize: '18',
          //   fontWeight: 'normal',
          //   color: '#fff',
          // },
        },
      },
      data: [
        {
          value: `${props.bottomData?.yhcount[0]}`,
        },
      ],
    },
    {
      name: '整改隐患数量',
      type: 'pie',
      clockWise: false,
      radius: ['90%', '75%'], // 使用相对值
      itemStyle: {
        normal: {
          color: '#5FB878',
          shadowColor: '#5FB878',
          shadowBlur: 0,
        },
      },
      hoverAnimation: false,
      center: ['85%', '50%'],
      label: {
        normal: {
          rich: {
            a: {
              color: '#5FB878',
              align: 'center',
              fontSize: 20,
              fontWeight: 'bold',
            },
            b: {
              color: '#fff',
              align: 'center',
              fontSize: 14,
            },
          },
          formatter: function (params) {
            return '{b|整改隐患数量}\n\n' + '{a|' + params.value + '}';
          },
          position: 'center',
          show: true,
          // textStyle: {
          //   fontSize: '18',
          //   fontWeight: 'normal',
          //   color: '#fff',
          // },
        },
      },
      data: [
        {
          value: `${props.bottomData.zgcount[0]}`,
        },
      ],
    },
  ],
});
const chart = ref()
const myChart = ref(null)
const initCharts = () => {
  chart.value.removeAttribute('_echarts_instance_')
  myChart.value = echarts.init(chart.value)
  myChart.value.setOption(option.value)
  window.addEventListener('resize', function () {
    // 在窗口尺寸变化时重新刷新图表
    myChart.value.resize()
  })
}
watch(
  () => props,
  (newValue, oldValue) => {
    myChart.value.setOption({
      series: [
        {
          data: [
            {
              value: `${props.bottomData.zczs[0]}`,
            },
          ],
        },
        {
          data: [
            {
              value: `${props.bottomData.yhcount[0]}`,
            },
          ],
        },
        {
          data: [
            {
              value: `${props.bottomData.zgcount[0]}`,
            },
          ],
        },
      ],
    })
  },
  { deep: true }
)
onMounted(() => {
  initCharts()
})
// onBeforeUnmount(() => {
//   _clearInterval(timer1.value)
// })
defineExpose({
  initCharts,
  props,
})
</script>
<style scoped lang="scss">
.chart-render-box {
  width: 100%;
  height: 100%;
  flex: 1;
}
</style>
